<template>
  <div>
    <div v-if="!custom" class="box">
      {{ title }}
      <span class="msg">
        &nbsp;&nbsp;
        {{ msg }}
      </span>
    </div>
    <div v-else class="box-custom">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: ""
    },
    msg: {
      type: String,
      default: ""
    },
    custom: {
      type: Boolean,
      default: false
    }
  }
};
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 52px;
  background-color: #f2f2f2;
  box-sizing: border-box;
  color: #333333;
  line-height: 52px;
  font-size: 18px;
  font-weight: bold;
  padding-left: 30px;
  margin-bottom: 22px;
  .msg {
    font-size: 12px;
    color: #999999;
    // font-weight: normal;
  }
}
.box-custom {
  width: 100%;
  min-height: 52px;
  background-color: #f2f2f2;
  box-sizing: border-box;
  margin-bottom: 22px;
}
</style>
